<template>
  <div class="leftpart">
    <a class="search active" href="#">搜索</a>
    <a class="material" href="#">素材</a>
    <a class="words" href="#">文字</a>
    <a class="template" href="#">模板</a>
    <a class="background" href="#">背景</a>
    <a class="picture" href="#">图片</a>
  </div>
</template>

<script>

</script>

<style scoped>
.leftpart{position:fixed;top: 54px;bottom: 0;left: 0;width: 64px;background: #eee;}
.leftpart a{display: block;position: relative;width: 64px;height:75px;padding-top: 45px;color: #72777d;font-size: 14px;text-align: center;}
.leftpart a.search{background: url(../assets/images/licon1.png) no-repeat center 20px}
.leftpart a.material{background: url(../assets/images/licon2.png) no-repeat center 20px}
.leftpart a.words{background: url(../assets/images/licon3.png) no-repeat center 20px}
.leftpart a.template{background: url(../assets/images/licon4.png) no-repeat center 20px}
.leftpart a.background{background: url(../assets/images/licon5.png) no-repeat center 20px}
.leftpart a.picture{background: url(../assets/images/licon6.png) no-repeat center 20px}
.leftpart a:hover,.leftpart a.active{color: #fff;}
.leftpart a.search:hover,.leftpart a.search.active{background: url(../assets/images/licon1_on.png) no-repeat center 20px #2ad8bd}
.leftpart a.material:hover,.leftpart a.material.active{background: url(../assets/images/licon2_on.png) no-repeat center 20px #2ad8bd}
.leftpart a.words:hover,.leftpart a.words.active{background: url(../assets/images/licon3_on.png) no-repeat center 20px #2ad8bd}
.leftpart a.template:hover,.leftpart a.template.active{background: url(../assets/images/licon4_on.png) no-repeat center 20px #2ad8bd}
.leftpart a.background:hover,.leftpart a.background.active{background: url(../assets/images/licon5_on.png) no-repeat center 20px #2ad8bd}
.leftpart a.picture:hover,.leftpart a.picture.active{background: url(../assets/images/licon6_on.png) no-repeat center 20px #2ad8bd}
.leftpart a.search.active::after{position: absolute;width: 10px;height: 10px;content: "";background: #fff;transform: rotate(45deg);top: 32px;right: -5px;}
.leftpart a.material.active::after{position: absolute;width: 10px;height: 10px;content: "";background: #fff;transform: rotate(45deg);top: 32px;right: -5px;}
.leftpart a.words.active::after{position: absolute;width: 10px;height: 10px;content: "";background: #fff;transform: rotate(45deg);top: 32px;right: -5px;}
.leftpart a.template.active::after{position: absolute;width: 10px;height: 10px;content: "";background: #fff;transform: rotate(45deg);top: 32px;right: -5px;}
.leftpart a.background.active::after{position: absolute;width: 10px;height: 10px;content: "";background: #fff;transform: rotate(45deg);top: 32px;right: -5px;}
.leftpart a.picture.active::after{position: absolute;width: 10px;height: 10px;content: "";background: #fff;transform: rotate(45deg);top: 32px;right: -5px;}
</style>

